<!-- @format -->

<template>
  <div class="container">
    <nav>
      <router-link to="/find"> 发现音乐 </router-link>
      <router-link to="/my">我的音乐</router-link>
      <!-- 声明式导航第2种传参：动态路由传参 -->
      <!--
        一. to的格式是字符串
          前提：需要改写路由表中对应的 /path/:参数名
          1. 传：<router-link to="/path/具体值"></router-link>
          2. 接：$route.params.参数名
      -->
      <!-- <router-link to="/friend/999">朋友</router-link> -->

      <!--
        二. to的格式是对象 
          前提：
            （1）需要改写路由表中对应的 /path/:参数名
             (2) 需要给对应的路由规则添加name属性，取名
             (3) 通过 name + params配合，不能用 path + params配合，因为path会忽略params
          1. 传：<router-link :to="{
            name: '路由的名字',
            params: {
              参数名: 值
            }
          }"></router-link>
          2. 接：$route.params.参数名

          注意：！！！虽然to写成了对象格式，但最终还是会变成字符串的格式传参数
      -->
      <router-link
        :to="{
          name: 'py',
          params: {
            id: 777
          }
        }">
        朋友
      </router-link>
    </nav>
    <router-view />
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style>
  .router-link-active {
    color: red;
    font-size: 18px;
  }
  a {
    margin-right: 15px;
  }
</style>
